<template>
  <div class="supplier_search">
    <!-- 供应商条件搜索表单 -->
    <el-form :model="supplier">
      <el-row>
        <!-- 供应商 -->
        <el-col :span="5">
          <el-input placeholder="请输入供应商名称" v-model="supplier.name" clearable>
            <template slot="prepend">供应商</template>
          </el-input>
        </el-col>
        <!-- 联系电话 -->
        <el-col :span="5" :offset="1">
          <el-input placeholder="请输入联系电话" v-model="supplier.contactNumber" clearable>
            <template slot="prepend">电话</template>
          </el-input>
        </el-col>
        <!-- 地址 -->
        <el-col :span="5" :offset="1">
          <el-cascader v-model="addressSelected" clearable placeholder="请选择地址" :options="addressDownBox"
            :props="{ expandTrigger: 'hover' }" @change="handleAddressDataChange">
          </el-cascader>
        </el-col>
        <!-- 搜索供应商按钮 -->
        <el-col :span="5" :offset="1">
          <el-button type="primary" icon="el-icon-search" @click="searchSupplier">搜索供应商</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'EmployeeSearch',
    data() {
      return {
        /* 供应商信息 */
        supplier: {
          name: '',
          contactNumber: '',
          address: '',
        },
        /* 选中的地址 */
        addressSelected: '',
        /* 地址下拉框数据 */
        addressDownBox: []
      }
    },
    methods: {
      /* 获得地址下拉框数据 */
      async getAddressData() {
          const { data: res } = await this.$http.get('settings/provinceCity/getAddressData.do')
          if (res.code == '1') {
            this.addressDownBox = res.others
          } else {
              console.log('获取地址下拉框数据失败!')
          }
      },
      /* 搜索供应商修改地址事件回调 */
      handleAddressDataChange(value) {
        const address = value[0] + " · " + value[1]
        this.supplier.address = address
      },
      /* 搜索供应商事件 */
      searchSupplier() {
        this.$bus.$emit('getSupplierPageList',this.supplier)
        this.$bus.$emit('getSupplierTotal')
      }
    },
    created() {
      this.getAddressData()
    }
  }

</script>

<style scoped>
  /* 搜索供应商表单 */
  .el-form {
    padding: 20px 20px;
  }

  .el-input {
    width: 270px;
  }

</style>
